<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>审核管理</title>
    <link href="../css/all.min.css?v=1.0.0" rel="stylesheet">
    <link href="../css/bootstrap.min.css?v=1.0.0" rel="stylesheet">
    <link href="../css/fontawesome.min.css?v=1.0.0" rel="stylesheet">
    <link href="../css/style.css?v=1.0.0" rel="stylesheet">
    <style>
        .preview-container {
            position: sticky;
            top: 1rem;
        }
        .image-preview {
            max-height: calc(100vh - 300px);
            overflow-y: auto;
        }
        .preview-image {
            width: var(--preview-width, 100%);
            margin-bottom: 1.5rem;
            border: 2px solid #dee2e6;
            border-radius: 8px;
            padding: 8px;
            position: relative;
            transition: width 0.2s ease;
        }
        .preview-image::before {
            content: attr(data-index);
            position: absolute;
            top: -12px;
            left: -12px;
            background: #0d6efd;
            color: white;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: bold;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .zoom-control {
            position: sticky;
            bottom: 0;
            background: rgba(255,255,255,0.9);
            padding: 10px;
            border-top: 1px solid #dee2e6;
            z-index: 1000;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .zoom-control input {
            flex: 1;
        }
    </style>
</head>
<body>
    <div id="auditApp" class="container-fluid p-4">
        <div class="row">
            <!-- 左侧列表 -->
            <div class="col-md-7">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">审核管理</h5>
                        <div class="d-flex align-items-center gap-3">
                            <div class="d-flex gap-2 small">
                                <span class="badge bg-secondary">总数: {{ stats.total || 0 }}</span>
                                <span class="badge bg-warning">待审核: {{ stats.pending || 0 }}</span>
                                <span class="badge bg-success">已通过: {{ stats.approved || 0 }}</span>
                                <span class="badge bg-danger">已拒绝: {{ stats.rejected || 0 }}</span>
                            </div>
                            <div class="d-flex gap-2">
                                <select class="form-select" v-model="selectedTemplate">
                                    <option value="">全部模板</option>
                                    <option v-for="template in templates" :key="template.id" :value="template.id">
                                        {{ template.name }}
                                    </option>
                                </select>
                            </div>
                        </div>
                        <div class="btn-group" v-if="selectedItems.length">
                            <button class="btn btn-success" @click="handleBatchApprove">
                                <i class="fas fa-check"></i> 批量通过({{ selectedItems.length }})
                            </button>
                            <button class="btn btn-danger" @click="handleBatchReject">
                                <i class="fas fa-times"></i> 批量拒绝({{ selectedItems.length }})
                            </button>
                        </div>
                    </div>
                    <div class="card-body table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>
                                        <div class="form-check">
                                            <input class="form-check-input" 
                                                   type="checkbox" 
                                                   v-model="selectAll"
                                                   @change="handleSelectAll">
                                        </div>
                                    </th>
                                    <th>ID</th>
                                    <th>用户ID</th>
                                    <th>模板ID</th>
                                    <th>图片</th>
                                    <th>提交时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-if="loading">
                                    <td colspan="6" class="text-center py-4">
                                        <div class="spinner-border text-primary" role="status">
                                            <span class="visually-hidden">加载中...</span>
                                        </div>
                                        <div class="mt-2">正在加载数据，请稍候...</div>
                                    </td>
                                </tr>
                                <tr v-else v-for="detail in details" :key="detail.id" 
                                    :class="{'table-active': currentDetail.id === detail.id}">
                                    <td>
                                        <div class="form-check">
                                            <input class="form-check-input" 
                                                   type="checkbox" 
                                                   :value="detail.id"
                                                   v-model="selectedItems"
                                                   @click.stop>
                                        </div>
                                    </td>
                                    <td @click="showImages(detail)" style="cursor: pointer">{{ detail.id }}</td>
                                    <td @click="showImages(detail)" style="cursor: pointer">{{ detail.user_id }}</td>
                                    <td @click="showImages(detail)" style="cursor: pointer">{{ detail.template_id }}</td>
                                    <td @click="showImages(detail)" style="cursor: pointer">
                                        <span class="badge bg-primary">
                                            {{ JSON.parse(detail.image_paths).length }} 张图片
                                        </span>
                                    </td>
                                    <td @click="showImages(detail)" style="cursor: pointer">{{ detail.create_time }}</td>
                                    <td @click="showImages(detail)" style="cursor: pointer">
                                        <span class="badge" :class="getStatusClass(detail.status)">
                                            {{ getStatusText(detail.status) }}
                                        </span>
                                    </td>
                                </tr>
                                <!-- 加载更多提示 -->
                                <div v-if="loading" class="text-center py-3">
                                    <div class="spinner-border spinner-border-sm text-primary" role="status">
                                        <span class="visually-hidden">加载中...</span>
                                    </div>
                                    <span class="ms-2">加载中...</span>
                                </div>
                                <!-- 无更多数据提示 -->
                                <div v-if="!loading && !hasMore" class="text-center text-muted py-3">
                                    <small>没有更多数据了</small>
                                </div>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- 右侧预览 -->
            <div class="col-md-5" v-if="currentDetail.id">
                <div class="card preview-container">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">预览详情</h5>
                        <div class="btn-group">
                            <button class="btn btn-success" @click="handleAudit(currentDetail, 1)">
                                <i class="fas fa-check"></i> 通过
                            </button>
                            <button class="btn btn-danger" @click="handleAudit(currentDetail, 2)">
                                <i class="fas fa-times"></i> 拒绝
                            </button>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <h6 class="mb-2">原始数据：</h6>
                            <div class="alert alert-secondary">
                                {{ currentDetail.release_data }}
                            </div>
                        </div>
                        <div class="image-preview">
                            <template v-if="currentDetail.image_paths">
                                <img v-for="(image, index) in JSON.parse(currentDetail.image_paths)"
                                     :key="index"
                                     :src="image.url"
                                     class="preview-image img-fluid"
                                     :alt="`图片 ${index + 1}`"
                                     :data-index="`图片 ${index + 1}`">
                            </template>
                        </div>
                        <div class="zoom-control">
                            <i class="fas fa-search-minus"></i>
                            <input type="range" 
                                   class="form-range" 
                                   v-model="zoomLevel" 
                                   min="50" 
                                   max="200" 
                                   step="10"
                                   @input="handleZoom">
                            <i class="fas fa-search-plus"></i>
                            <span class="badge bg-secondary">{{ zoomLevel }}%</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="../js/lib/bootstrap.bundle.min.js?v=1.0.1"></script>
    <script src="../js/lib/vue.min.js?v=1.0.1"></script>
    <script src="../js/lib/sweetalert2.min.js?v=1.0.1"></script>
    <script src="../js/pages/audit.js?v=1.0.2"></script>
</body>
</html> 